<template>
    <div class="header">
      <div class="header-left">
        <div class="iconfont back-icon">&#xe66c;</div>
      </div>
      <div class="header-input">
        <span class="iconfont">&#xe67d;</span>
        请输入城市/景点/游玩主题
      </div>
      <router-link to="/city">
        <div class="header-right">
          <!--<select @change="aa()">
            <option v-for="c in list" :value="c.id" :key="c.id">
              {{c.name}}
            </option>
          </select>-->
          北京
          <div class="iconfont arrow-icon">&#xe658;</div>
        </div>
      </router-link>
    </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    list: [],
  },
  data() {
  },
  methods: {

  },
};
</script>

<style scoped>
  .header{
    display: flex;
    height: 46px;
    background: #00bcd4;
    color: #fff;
  }
  .header-left{
    height: 38px;
    line-height: 38px;
    width: 40px;
    float: left;
  }
  .back-icon{
    text-align: center;
    font-size: 25px;
  }
  .header-input{
    flex: 1;
    /*float: left;*/
    height: 38px;
    line-height: 38px;
    margin-top: 2px;
    margin-left: 2px;
    padding-left: 4px;
    background: #fff;
    border-radius: 2px;
    color: #ccc;
  }
  .header-right{
    width: 60px;
    height: 38px;
    line-height: 38px;
    float: right;
    text-align: center;
    color: #fff;
  }
  .arrow-icon{
    font-size: 4px;
    margin-left: -5px;
    float: right;
  }

</style>
